<!DOCTYPE html>
<html>
<head>
	<base href="http://localhost:8080/"/>
	<meta charset="utf-8"> 
	<title>数据处理</title> 
	<link rel="stylesheet" href="css/list.css"/>
	<style>
		#ruleTable td{height:30px;}
		#otherRuleTable td{height:30px;}
	</style>
	
</head>
<body>
	<#include "/inc/header.ftl"/>
	<div id="container" style="width:1200px;">
		<!--container.begin-->
		<div id="menu" style="background-color:#CCC;height:570px;width:300px;float:left;OVERFLOW:auto;">
			<!--menu.begin-->
			<div style="margin:0 auto;margin-top:10px;width:200px;">
			<ul>
				<#list tables as table>
					<#list table?keys as key>
						<li><a href="data/${table[key]}?pageNo=1">${table[key]}</a></li>
					</#list>
				<#else>
					没有找到表
				</#list>
			</ul>
			</div>
			<!--menu.end-->
		</div>
		 
		<div id="content" style="background-color:#EEEEEE;height:540px;width:880px;float:left;padding:5px;font-size:12px;">
			<!--content.begin-->
			<div style="height:330px;OVERFLOW:scroll;font-size:12px;">
				<p style="font-size:14px;">表名：${tableName}</p>
				<table style="border:1px solid #CCC;border-collapse:collapse;text-align:center">
					<tr style="height:30px;font-weight:900">
						<#list (columnHeader)!?keys as column>
							<td style="width:100px;border:1px solid #ccc;">${column}</td>
						<#else>
							<td style="width:100px;">没有找到数据</td>
						</#list>
					</tr>
					<#list data as d>
					<tr style="height:27px;">
						<#list d?keys as key>
							<td style="width:100px;border:1px solid #ccc;">${d[key]}</td>
						</#list>
					</tr>
					</#list>
				</table>
			</div>
			<#--分页-->
			<div class="tcdPageCode" style="width:100%;text-align:center" ></div>
			<#--导入条件选择面板-->
			<hr>
			<div style="height:100px;">
				<table style="margin-top:5px;" id="ruleTable">
					<tr>
						<td style="width:100px;">选择导入规则：</td>
						<td><select name="columnName" id="columnName">
							<option value="">选择导入列</option>
							<#list (columnHeader)!?keys as column>
								<option value="${column}">${column}</option>
							<#else>
								<option value=""/>
							</#list>
							</select></td>
						<td>
							<#--插入模式-->
							<select name="importMode" id="importMode">
								<#list (importMode)!?keys as key>
									<option value="${key}">${importMode[key]}</option>
								</#list>
							</select>
						</td>
						<td><label>分组列</label><input type="text" name="groupColumnName" id="groupColumnName" style="width:100px;"/></td>
						<td><label>排序列</label><input type="text" name="orderColumnName" id="orderColumnName" style="width:100px;"/></td>
						<td><select name="selectTargetTable" id="selectTargetTable" style="width:100px;">
									<option value="">选择导入到目标表</option>
							<#list tables as table>
								<#list table?keys as key>
									<option value="${table[key]}">${table[key]}</option>
								</#list>
							</#list>
						</select></td>
						<td><select name="selTargetColumn" id="selTargetColumn" style="width:100px;">
									<option value="">导入到目标列</option>
						</select></td>
					</tr>
					<tr style="display:none">
						<td>
							是否生成编号：
						</td>
						<td>
							<input type="radio" name="radioID" id="radioIDNo" value="0" checked="checked"/> 否 
							<input type="radio" name="radioID" id="radioIDYes" value="1"/> 是
						</td>
						<td>
							<div class="divID" style="display:none">
								<select name="selIDModeTemplate" id="selIDModeTemplate">
									<#list (idMode)!?keys as key>
										<option value="${key}">${idMode[key]}</option>
									</#list>
								</select>
							</div>
						</td>
						<td colspan="2">
							<div class="divID" style="display:none">
								将ID插入到哪个列中：
								<select name="selTargetColumnOfID" id="selTargetColumnOfID">
									<option value="">导入到目标列</option>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							补充其他列数据？
						</td>
						<td>
							<input type="radio" name="radioOther" id="radioOtherNo" value="0" checked="checked"/> 否
							<input type="radio" name="radioOther" id="radioOtherYes" value="1"/> 是
						</td>
						<td><div id="addBtnDiv" style="display:none"><input type="button" id="addOtherBtn" value="&nbsp;增加&nbsp;"></div></td>
						<td></td>
						<td><div id="loading" style="float:right"/></td>
					</tr>
				</table>
				<table id="otherRuleTable"></table>
				<div style="text-align:center"><input type="submit" id="saveData" value="&nbsp;&nbsp;保存&nbsp;&nbsp;"/></div>
			</div>
			<!--content.end-->
		</div>
		
		
		<!--container.end-->
	</div>
	<#include "/inc/footer.ftl"/>
</body>
</html>
<#include "/inc/script.ftl"/>
<script>
	var basePath = $("base").attr("href");
	
	<#--分页方法-->
    $(".tcdPageCode").createPage({
        pageCount:${page.pageSize},
        current:${page.pageNo},
        backFn:function(p){
        	location.href = basePath+"data/${tableName}?pageNo="+p+"&pageSize=${page.pageSize}";
        }
    });
    
    <#--改变“导入目标表下拉框”时执行的方法：按选择的表追加“列”下拉框的数据-->
    $("#selectTargetTable").change(function(){
    	var tname=$("#selectTargetTable").val();
    	$.ajax({
    		url: basePath+"data/column?tname="+tname,
    		beforeSend:function(XMLHttpRequest){
				$("#loading").html("<img src='images/loading.gif' style='height:30px;width:30px;'/>");
			},
    		success: function(data){
    			$("#loading").html("");
    			var selTargetColumn = $("#selTargetColumn");
    			var selTargetColumnOfID = $("#selTargetColumnOfID");
    			selTargetColumn.empty();
    			selTargetColumnOfID.empty();
    			selTargetColumn.append("<option value=\"\">导入到目标列</option>");
    			selTargetColumnOfID.append("<option value=\"\">导入到目标列</option>");
    			var jsonData = eval('(' + data + ')');
    			$.each(jsonData, function(index, column){
    				var str = column.Field + " - " + column.Type;
    				selTargetColumn.append("<option value=\"" + column.Field + "\">" + str + "</option>");
    				selTargetColumnOfID.append("<option value=\"" + column.Field + "\">" + str + "</option>");
    			});
    		}
    	});
    });
    
    <#--点击保存时执行-->
    $("#saveData").click(function(){
    	var tableName = "${tableName}";
    	var columnName = $("#columnName").val();groupColumnName
    	var groupColumnName = $("#groupColumnName").val();
    	var orderColumnName = $("#orderColumnName").val();
		var importMode = $("#importMode").val();
		var selectTargetTable = $("#selectTargetTable").val();
		var selTargetColumn = $("#selTargetColumn").val();
		var radioOther = $("input[name='radioOther']:checked").val();
		
		var params = "tableName="+tableName;
		params += "&columnName="+columnName;
		params += "&groupColumnName="+groupColumnName;
		params += "&orderColumnName="+orderColumnName;
		params += "&importMode="+importMode;
		params += "&selectTargetTable="+selectTargetTable;
		params += "&selTargetColumn="+selTargetColumn;
		params += "&radioOther="+radioOther;
		
		var jsonstr = "[{";
		$("#otherRuleTable .other").each(function(){
			//组装数据
			jsonstr += "\"" + $(this).attr("name") + "\":\"" + $(this).val() + "\"";
			if("selTargetOtherColumn" == $(this).attr("name")){
				jsonstr += "},{"
			} else {
				jsonstr += ","
			}
		});
		jsonstr = jsonstr.substr(0, jsonstr.length-2);
		jsonstr = jsonstr+"]";
		params += "&jsonOtherColumn="+jsonstr;
		
    	$.ajax({
    		url: basePath + "data",
    		data: params,
    		type: "POST",
    		beforeSend:function(XMLHttpRequest){
				$("#loading").html("<img src='images/loading.gif' style='height:30px;width:30px;'/>");
			},
    		success: function(data) {
    			$("#loading").html("");
    			alert(data);
    		}
    	});
    });
    
    $("#addOtherBtn").click(function(){
    	var row = "<tr><td>查询SQL</td>";
    	row += "<td><input type=\"text\" name=\"txtOtherSql\" class=\"other\" /></td>";
    	row += "<td><select name=\"selIDMode\" id=\"selIDMode\" class=\"other\">";
    	$("#selIDModeTemplate option").each(function(){
    		row +="<option value=\""+$(this).val()+"\">"+$(this).text()+"</option>";
    	});
    	row +=		"</select></td>";
    	row +=	"<td style=\"text-align:right\">自定义值：</td>";
    	row +=	"<td><input type=\"text\" name=\"txtOtherColumnValue\" class=\"other\" /></td>";
    	row +=	"<td></td>";
    	row +=  "<td><select name=\"selTargetOtherColumn\" style=\"width:100px;\" class=\"other\">";
    	$("#selTargetColumn option").each(function(){
    		row +="<option value=\""+$(this).val()+"\">"+$(this).text()+"</option>";
    	});
    	row +=	"</select></td></tr>";
    	
    	$("#otherRuleTable").append(row);
    });
    
	$("#radioOtherNo").click(function(){
		$("#addBtnDiv").css("display","none");
	});
	$("#radioOtherYes").click(function(){
		$("#addBtnDiv").css("display","");
	});
</script>

